<template>
	<view class="caregory">
		<scroll-view class="nav_left" scroll-y="true" >
			<view v-for="(item,index) in navLeftItems" 
			:class="curIndex==index?'nav_left_items nav_left_item-active':'nav_left_items'" 
			@tap="switchRightTab($event,index)">
				{{item}}
			</view>
		</scroll-view>
		<!-- 右边 -->
		<scroll-view class="nav_right" scroll-y="true" >
			<view class="jd-category" v-for="(out_item,out_index) in navRightItems[curIndex]">
				<view class='title'>{{out_item.title}}</view>
				<view class="goods-list">
					<view class="jd-category-wrap" v-for="(item,index) in out_item.desc"
					@tap="showListView(item.text)">
						<image class="list_img" :src="item.img" mode=""></image>
						<text class='list_text'>{{item.text}}</text>
					</view>
				</view>
				
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import data_jhf from "../../utils/data_jhf.js"
	
	export default {
		data() {
			return {
				navLeftItems: [],
				navRightItems: [],
				curIndex: 0,
			}
		},
		methods: {
			switchRightTab(e,index){
				console.log(e)
				console.log(index)
				this.curIndex = index
			},
			showListView(text){
				console.log(text)
				uni.navigateTo({
					url:'/pages/list/list?title=' + text
				})
			}
			
		},
		onLoad() {
			uni.showLoading({
				title:"加载中"
			})
			setTimeout(()=>{
				uni.hideLoading()
				this.navLeftItems = data_jhf.productions.navLeftItems,
				this.navRightItems = data_jhf.productions.navRightItems
			},1000)
		}
	}
</script>

<style>
	.caregory{
	  display: flex;
	  flex-direction: row;
	  height: 100%;
	}
	.nav_left{
	  background: #f8f8f8;
	  width: 24%;
	  height: 100%;
	  white-space: nowrap;
	}
	.nav_right{
	  background: #fff;
	  width: 76%;
	  height: 100%;
	}
	.nav_left_items{
	  font-size: 28rpx;
	  color: #333;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	}
	.nav_left_item-active{
	  background-color: #fff;
	  color: #e93b3d;
	}
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	.jd-category{
		margin: 30upx 16upx;
	}
	.title{
		font-size: 34upx;
		font-weight: bold;
		
	}
	.goods-list{
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		margin-top: 10upx;
	}
	.jd-category-wrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10upx;
	}
	.list_img{
	  width: 150rpx;
	  height: 150rpx;
	}
	.list_text{
	  text-align: center;
	  font-size: 24rpx;
	  color: #686868;
	  margin-top: 10rpx;
	  height: 70rpx;
	}

</style>
